import { memo, useState } from 'react';
import styled from 'styled-components';

const AppStyle = styled.div`
	width: 200px;
	height: 200px;
	background: ${(props) => props.theme.colorPrimary};
	color: ${(props) => props.theme.color};
`;

const Foo = memo(() => {
	console.log('Foo');
	return <div>Foo</div>;
});

const arr = ['a', 'b', 'c'];

const hashMap = new Map();
hashMap.set('abc', 1);
hashMap.get('abc');

const CssInJs = () => {
	const [count, setCount] = useState(0);

	function increment() {
		setCount(count + 1);
		setCount(count + 1);

		for (const i in arr) {
			console.log(i);
		}
	}

	return (
		<AppStyle>
			<Foo />
			<button onClick={increment}>{count}</button>
		</AppStyle>
	);
};

export default CssInJs;
